<template>
	<!-- 外面最大的div -->
	<view class="sideBox">
		<view class="center">
			<!-- 巡检头部部分 -->
			<view class="header">
				<text>信息</text>
				<view class="rightBox">
					<view class="addBox">
						<!-- <button id="btn1"><text>添加信息</text></button> -->
						<navigator url=""><text>添加信息</text></navigator>
						
					</view>
					<view class="seeBox">
						<!-- <button><text>查看安全报表</text></button> -->
						<navigator url=""><text>查看安全报表</text></navigator>
						
					</view>
				</view>
				
			</view>
			<!-- 巡检的具体信息 -->
			<view class="checkDetailsBox">
				<uni-table stripe emptyText="暂无更多数据" class="detailTable">
				    <!-- 表头行 -->
				    <uni-tr>
				        <uni-th class="thCss" width="50" align="center">巡检日期</uni-th>
				        <uni-th class="thCss" width="50" align="center">读数(m3)</uni-th>
				        <uni-th class="thCss" width="50" align="left">燃气泄露</uni-th>
				        <uni-th class="thCss" width="50" align="left">安全系数</uni-th>
				        <uni-th class="thCss" width="50" align="left">视频图片</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(item, index) in uDetailArr">
				        <uni-td>{{item.date}}</uni-td>
				        <uni-td>{{item.num}}</uni-td>
				        <uni-td>{{item.state}}</uni-td>
				        <uni-td>{{item.level}}</uni-td>
				        <uni-td>
							<navigator url="">查看</navigator>
						</uni-td>
				    </uni-tr>
				   
				
				</uni-table>
				
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
export default {
	data(){
		return {
			uDetailArr: [{
				date:'21/3/1',
				num:'290',
				state: '无',
				level:'高'
			 },{
				date:'21/3/1',
				num:'170',
				state: '轻微',
				level:'中'
			 },{
				date:'21/3/1',
				num:'30',
				state: '严重',
				level:'低'
			 }]
		}
	}
}
</script>

<style lang="less" scoped>
.sideBox {
	width: 750rpx;
	.center {
		width: 690rpx;
		margin: 0 auto;
		.header {
			margin-top: 48rpx;
			display: flex;
			height: 60rpx;
			align-items: center;
			justify-content: space-between;
			>text:nth-child(1) {
				font-size: 34rpx;
				font-weight: 600;
			}
			.rightBox {
				display: flex;
				.addBox {
					text {
						width: 158rpx;
						height: 60rpx;
						display: flex;
						box-sizing: border-box;
						border-radius: 12rpx;
						justify-content: center;
						align-items: center;
						border: 2px solid #2475fb;
						font-size: 25rpx;
						color: #2475fb;
					}
					
				}
				.seeBox {
					width: 210rpx;
					height: 60rpx;
					display: flex;
					border-radius: 12rpx;
					justify-content: center;
					align-items: center;
					background: #2475fb;
					font-size: 25rpx;
					color: #fff;
					margin-left: 20rpx;
				}
			}
		}
		.checkDetailsBox {
			width: 690rpx;
			font-size: 20rpx;
			color: #000;
			margin-top: 50rpx;
			.detailTable {
				.thCss {
					font-size: 20rpx;
					color: #000;
				}
			}
			
		}
	}
}
</style>
